<template>
  <div class="container">
  <el-steps space="100%" :active="steps" finish-status="success" style="margin:30px 0 0 300px">
    <el-step title="基础信息"></el-step>
    <el-step title="分类库位"></el-step>
  </el-steps>
  <div class="form" >
    <el-form v-if="nextPage" :model="formData" :rules="rules" ref="form">
      <el-form-item label="货主编号" prop="code">
        <el-input :disabled="!!formData.code"   v-model="formData.code"/>
      </el-form-item>
      <el-form-item label="货主名称" prop="name">
        <el-input v-model="formData.name"   />
      </el-form-item>
      <el-form-item label="联系人"  prop="personName">
        <el-input  v-model="formData.personName" />
      </el-form-item>
      <el-form-item label="联系人电话"  prop="phone">
        <el-input  v-model="formData.phone"/>
      </el-form-item>
      <el-form-item label="联系人邮箱">
        <el-input  v-model="formData.email" />
      </el-form-item>
      <!--width!!  -->
      <el-form-item label="省/市/区"  prop="location">
          <el-cascader ref="location"  v-model="location" :options="locationList.exports" :props="{ expandTrigger: 'click',label:'name',value: 'code',children:'areaList'}"
              @change="handleChangeLocation">
          </el-cascader>
      </el-form-item>
      <el-form-item style="flex-basis: 49%" label="详细地址">
        <el-input  v-model="formData.address"/>
      </el-form-item>
      <el-form-item class="remark" style="flex-basis:50%;" label="备注">
        <el-input  v-model="formData.remark"/>
      </el-form-item>
    </el-form>
      <div class="table" v-else>
        <div class="btn-left">
          <el-button class="btn3" @click="openFenpeikuwei">分配库位</el-button>
          <el-button class="btn4" @click="delOwnerArea">取消分配</el-button>
        </div>
        <div v-if="tableData.records?.length">
          <el-table :data="tableData.records" @selection-change="selectionchange" ref="choose" border :cell-style="{padding: '0',height:'44px'}" max-height="400" >
        <el-table-column align="center" type="selection" label="序号" width="50" max-height="44"/>
        <el-table-column align="center" prop="warehouseName" label="仓库名称" min-width="150"/>
        <el-table-column align="center" prop="areaName" label="库区名称" min-width="150"/>
        <el-table-column align="center" prop="locationCode"  label="库位编号" min-width="199"/>
        <el-table-column align="center" prop="locationName" label="库位名称" min-width="150"/>
        <el-table-column align="center" class="is-hidden"  label="操作" min-width="200" >
          <template v-slot="{row}">
            <el-button class="table-cancel"  @click="delOwnerArea(row)" type="text" size="small">取消分配</el-button>
          </template>
        </el-table-column>
      </el-table>
        <!-- 分页组件 -->
        <PageTool
        :total="tableData.total"
        :paginationPage="tableData.current"
        :paginationPagesize="tableData.size"
        @pageSizeChange="pageSizeChange"
        @pageChange="pageChange"
        style="height:60px ;margin-top:10px;text-align:center"
        />
        </div>
          <div class="infoless" v-else>
            <img  src="http://www-wms-java.itheima.net/img/empty.4300e933.png" alt="">
            <p>暂无库位</p>
          </div>
      </div>
    <div class="btn">
      <el-button class="btn1" @click="preStep">{{steps===1?'上一步':'返回'}}</el-button>
      <el-button class="btn2" @click="nextStep">{{steps===1?'提交':'下一步'}}</el-button>
    </div>
  </div>
  <!-- 分配库位弹出框 -->
    <el-dialog  title="分配货主库位"  :visible.sync="fenpeikuwei"  width="50%"  center>
          <el-cascader v-model="value" :options="info" :props="props" clearable></el-cascader>
  <span slot="footer" class="dialog-footer">
    <el-button @click="fenpeikuwei = false">取 消</el-button>
    <el-button type="primary" @click="fenpei">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail, put, getCode, add, getownerLocationlist, getwarehouselist, tree, delOwnerArea, fenpei } from '@/api/goods-owner'
export default {
  name: 'goods-owner-add',
  data () {
    return {
      // 存放下方表格数据
      tableData: [123],
      value: [], // 存放级联选择器的值,
      submit: {
        idStrArray: [], // 存放 经value 处理过后的数据
        ownerId: ''
      },
      search: {
        current: 1,
        size: 10,
        ownerId: ''
      },
      // 存放分配库位的 树状数据
      fenpeikuwei: false, // 分配库位的dia
      info: [],
      // info: [[{ label: '出库缓存区', value: '798977362099175521', ownerId: null, children: [{ label: '1-1-1', value: '798978885654938081', ownerId: '798980939605607297', children: null }, { label: '1-1-2', value: '798979341806469729', ownerId: '798980939605607297', children: null }, { label: '1-1-3', value: '798980926930420577', ownerId: '798980939605607297', children: null }, { label: '1-1-4', value: '798981014184526849', ownerId: '798980735426888481', children: null }, { label: '1-1-5', value: '798981122401764417', ownerId: '798980735426888481', children: null }] }, { label: '入库缓存区', value: '798977471239159969', ownerId: null, children: [{ label: '1-2-1', value: '798981233731175585', ownerId: '798980735426888481', children: null }, { label: '1-2-2', value: '798981277611984065', ownerId: '798980735426888481', children: null }, { label: '1-2-3', value: '798981320674903265', ownerId: '798980735426888481', children: null }, { label: '1-2-4', value: '798981385200076097', ownerId: '1053735176351305025', children: null }, { label: '1-2-5', value: '798981472739394913', ownerId: '1053735176351305025', children: null }] }, { label: '冻结区', value: '798977619574915265', ownerId: null, children: [{ label: '1-3-1', value: '798981559175611777', ownerId: '798980735426888481', children: null }, { label: '1-3-2', value: '798981692059551169', ownerId: '798980735426888481', children: null }, { label: '1-3-3', value: '798981746468062689', ownerId: '798980735426888481', children: null }, { label: '1-3-4', value: '798981814721971713', ownerId: '798980939605607297', children: null }, { label: '1-3-5', value: '798981871483487809', ownerId: '1053735176351305025', children: null }] }, { label: '存储区', value: '798977750407840001', ownerId: null, children: [{ label: '1-4-3', value: '798980097213203105', ownerId: '798980735426888481', children: null }, { label: '1-4-1', value: '798980521215394497', ownerId: '798980735426888481', children: null }, { label: '1-4-2', value: '798980658369135329', ownerId: '798980735426888481', children: null }, { label: '1-4-5', value: '798980724307788545', ownerId: '798980939605607297', children: null }, { label: '1-4-4', value: '798980788669383489', ownerId: '798980939605607297', children: null }] }, { label: '大库房', value: '799407388967831649', ownerId: null, children: [] }], [{ label: '2号出库缓存区', value: '798977987620897121', ownerId: null, children: [] }, { label: '2号入库缓存区', value: '798978090452648321', ownerId: null, children: [] }, { label: '2号冻结区', value: '798978543450063265', ownerId: null, children: [] }, { label: '常温存储区', value: '798978732881609153', ownerId: null, children: [] }], []],
      props: {
        multiple: true,
        value: 'value',
        label: 'label',
        children: 'children'
      }, // 开启多选
      selectedArray: [], // table选中的数组

      //
      steps: 0,
      nextPage: true,
      locationList: {},
      /** location==>> 省市区级联选择器绑定的变量,
        * 用来输出 formData.location的babel信息
        * province,area,city,的code信息
        *  */
      location: [],
      formData: {
        code: '', // 货主编号
        name: '', // 货主名称
        personName: '', // 联系人
        phone: '', // 联系电话
        email: '', // 邮箱
        location: '', // 省市区
        address: '', // 详细地址
        remark: '', // 备注
        province: '', // 省
        area: '', // 市
        city: '' // 区

      },
      rules: {
        code: [{ required: true, message: '必填' }],
        name: [{ required: true, message: '必填' }],
        personName: [{ required: true, message: '必填' }],
        phone: [{ required: true, message: '必填' }],
        location: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  created () {
    // console.log(window.webpackJsonp[0][1]['6cca'])
    window.webpackJsonp[0][1]['6cca'](this.locationList)// 获取省市区 本地数据
    console.log('this.$route.params.id====>', this.$route.params.id)
    if (this.$route.params.id !== 'null') { // 如果是编辑,路由导航会有
      this.detail()
    } else {
      this.getCode()
    }
  },
  methods: {
    async detail () { // 路由id不为null时获取货主信息
      const { data: detailinfo } = await detail(this.$route.params.id)
      this.formData = detailinfo
      this.$nextTick(() => {
        this.$refs.location.inputValue = detailinfo.location
      })
    },
    async getCode () { // 路由id为null时 确认为新增页面,发起请求获取新的Code
      const { data } = await getCode()
      console.log(data)
      this.formData.code = data
    },
    handleChangeLocation (a) { //
      console.log(a);
      [this.formData.province, this.formData.area, this.formData.city] = a
      console.log(this.$refs.location)
      this.formData.location = this.location
      setTimeout(() => {
        this.formData.location = this.$refs.location.inputValue.replace(/\s*/g, '')
      })
    },
    async nextStep () {
      // console.log(this.$refs.form)
      try {
        if (this.steps < 1) {
          await this.$refs.form.validate()
          if (this.$route.params.id !== 'null') {
            const res = await put(this.formData)
            if (!res.isSuccess) {
              this.$message.warning(res.msg)
            } else {
              this.$message.success('提交成功')
              this.steps++
              this.nextPage = false
              this.search.ownerId = res.data.id
              this.getownerLocationlist()// 获取表格数据
              this.getwarehouselist()// 获取启用仓库的数据
            }
          } else if (this.$route.params.id === 'null') {
            const res = await add(this.formData)
            if (!res.isSuccess) {
              this.$message.warning(res.msg)
            } else {
              this.$message.success('提交成功')
              this.steps++
              this.nextPage = false
              this.search.ownerId = res.data.id
              this.getownerLocationlist()// 获取表格数据
              this.getwarehouselist()// 获取启用仓库的数据
            }
          }
        } else {
          this.$router.push('/layout/goods-owner')
        }
      } catch (e) {
        console.log(e)
      }
    },
    preStep () {
      if (this.steps === 1) {
        this.$router.back()
      } else {
        this.$router.push('/layout/goods-owner')
      }
    },
    pageSizeChange (size) {
      this.search.size = size
      this.getownerLocationlist()
    },
    pageChange (page) {
      this.search.current = page
      this.getownerLocationlist()
    },
    async getwarehouselist () { // 获取全部启用的仓库数据(id)
      const { data } = await getwarehouselist()
      console.log(data)
      data.forEach(async (i, index) => {
        console.log(i.id)
        const { data: children } = await tree(i.id)// 根据仓库id获得库区的树形数据
        // data.forEach(item => {
        this.info.push({ label: i.name, value: i.id, children: children })
        // })
        // this.info[index] =  (...data )
      })
    },
    async delOwnerArea (row) {
      // 删除货主库位关联表
      if (row.id) { // 删除 当前行的库位
        await this.$confirm(`确定删除名称为"${row.locationName}"的库位吗?`)
        const res = await delOwnerArea(row.id)
        if (res.isSuccess) {
          this.$message.success('操作成功')
        } else { this.$message.erroer(res.msg) }
      } else { // 删除选中的库位
        if (this.selectedArray.length === 0) { return this.$message.warning('没选中,删个毛') }
        await this.$confirm('你想反悔吗?')
        // console.log(this.$refs.choose
        this.selectedArray.forEach(async item => {
          // console.log(item)
          await delOwnerArea(item.id)
        })
        this.$message.success('操作成功')
      }
      this.getownerLocationlist()// 重新获取数据 ,刷新列表
    },
    selectionchange (val) {
      this.selectedArray = val
    },
    async getownerLocationlist () { // 重新获取表格数据
      const { data } = await getownerLocationlist(this.search)
      this.tableData = data
    },
    openFenpeikuwei () { // 打开分配库位的dia
      this.fenpeikuwei = true
    },
    async fenpei () { // 提交分配请求
      this.value.forEach((i, index) => {
        console.log(i)
        this.submit.idStrArray[index] = i.join(',')
      })
      this.submit.ownerId = this.formData.id
      console.log(this.submit)
      const res = await fenpei(this.submit)
      console.log(res)
      this.fenpeikuwei = false
      this.getownerLocationlist()
    }
  }

}
</script>

<style lang="less" scoped>
.container{
    // height: 100%;
    background-color: #fff;
    box-shadow: 3px 3px  10px gray;
    border-radius: 10px;
    padding: 30px;
    /deep/.el-steps{
      .el-step__head.is-success{

          border-color: #C0C4CC;

        .el-step__icon.is-text{
          color: orange;
          border-color: orange;
        }
      }
        .el-step__title.is-success{
          color: orange;
        }
    }
    /deep/.el-form{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item{
        width: 23%;
        .el-input__inner{
          background-color: #f8f5f5;
        }
        .el-cascader{
          width:100%
        }
      }
      .remark{
        .el-input__inner{
          height:50px
        }
      }
    }
    /deep/.table{
      .btn-left{
      display: flex;
      padding-top: 20px;
      justify-content: flex-start;
      >.el-button{
        width: 108px;
        height:40px;
        border-radius:30px;
      }
      >.btn3{color: #fff;;background-color: #00be76}  >.btn3:hover{background-color: #007a4c}
      >.btn4{color: black;;background-color: #fff}  >.btn4:hover{background-color: #ffb200}

    }
    .table-cancel{
      color: #e8890d;
    }
    tr>th{
      background-color:#f9f6ee;
    }
    tr:hover>td,tr.el-table__row.hover-row:hover>td{
      background-color: #f2d8b5;
    }
    .infoless{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 382px;
      img{
        width: 160px;
        height:160px;
      }
      p{margin-top: 10px}
    }
    }
    .btn{
      padding-top: 20px;
      border-top: 1px solid #f5efee;;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button{
        width:170px;
        height: 40px;
        border-radius: 30px;
        color: black;
        border:none
      }
      .btn1{background-color: #f8f5f5}.btn1:hover{background-color:#ffb200;color: black;}
      .btn2{background-color: #ffb200}.btn2:hover{background-color: #e8890d;color: black}
    }

}
</style>
